<template>
  <div class="ranks">
    <van-overlay :show="show" class-name="bgcolor">
      <div class="wrapper" @click.stop>
        <div class="block" />
      </div>
    </van-overlay>
    <section>
      <ul>
        <li v-for="(item, index) in data" :key="item.comic_id">
          <router-link :to="{ name: 'present', query: { id: item.comic_id } }">
            <div class="left">
              <div class="lnum">{{ index + 1 }}</div>
              <div><img v-lazy="item.vertical_cover" alt="" /></div>
              <div class="lwrod">
                <div class="ltop">
                  <p>{{ item.title }}</p>
                </div>
                <div class="lbot">
                  <p>{{ item.author[0] }}</p>
                  <p v-for="el in item.styles" :key="el.id">{{ el.name }}</p>
                  <p>更新至{{ item.last_short_title | foo }}</p>
                </div>
              </div>
            </div>
            <div class="right">
              <div></div>
            </div>
          </router-link>
        </li>
      </ul>
    </section>
  </div>
</template>
  <script>
import { get } from "@/http/request";

export default {
  name: "Ranks",
  data() {
    return {
      data: {},
      show: true,
    };
  },
  methods: {
    async init() {
      await get("https://apis.netstart.cn/mbcomic/HomeHot?type=1", {
        params: {},
      }).then((res) => {
        console.log(res.data);
        this.data = res.data;
      });
    },
  },
  created() {
    this.init();
    // this.$toast({
    //   message: "加载中...",
    //   forbidClick: true,
    //   type: "loading",
    // });
  },
  mounted() {},
  props: {
    msg: String,
  },
  filters: {
    foo(value) {
      if (value.indexOf("话") > -1) {
        value = value.replace("话", "");
      }
      return value + "话";
    },
  },
  watch: {
    data(newimg, oldimg) {
      if (oldimg == null) {
        this.show = true;
      } else if (newimg) {
        this.show = false;
      }
    },
  },
};
</script>
  <style lang="scss">
.bgcolor {
  background-color: #fcfbfb;
}
.wrapper {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  .block {
    width: 120px;
    height: 120px;
    background-image: url(../../assets/1441607667576727.gif);
    background-size: cover;
    background-position-x: center;
    background-color: #fff;
  }
}
section {
  width: 100%;
  padding: 10px;
  ul {
    width: 100%;
    li {
      width: 100%;
      margin-top: 5px;
      a {
        width: 100%;
        display: flex;
        justify-content: space-between;
        .left {
          display: flex;
          font-size: 18px;
          img {
            width: 102px;
          }
          .lnum {
            font-size: 24px;
            font-weight: 1000;
            color: #f04;
          }
          .lwrod {
            margin-left: 5px;
            display: flex;
            flex-flow: column;
            justify-content: space-between;
            .ltop {
              color: #1c1d1f;
              p {
                overflow: hidden;
                text-overflow: ellipsis;
                display: -webkit-box;
                -webkit-line-clamp: 2;
                -webkit-box-orient: vertical;
              }
            }
            .lbot {
              color: #90959b;
              font-size: 12px;
              text-align: left;
              p {
                margin-top: 10px;
              }
            }
          }
        }

        .right {
          display: flex;
          flex-flow: column;
          justify-content: end;
          div {
            width: 24px;
            height: 24px;
            background-image: url(../../assets/下载.png);
            background-size: cover;
          }
        }
      }
    }
  }
}
</style>